<template>
  <div style="padding: 10px">
    <el-form ref="form" :model="queryParams" inline size="small">
      <el-form-item label="文件名" prop="fileName">
        <el-input v-model="queryParams.fileName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="导入时间" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handle_search" type="primary" icon="el-icon-search">查询</el-button>
        <el-button @click="resetForm('form')" icon="el-icon-refresh">重置</el-button>
        <el-button type="primary" plain @click="handle_showDialog('uploadDialog')">导入数据</el-button>
      </el-form-item>
      <el-form-item style="flex: 1; text-align: right">
        <el-button @click="$router.back()" type="primary" plain>返回</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-button type="danger" plain size="small" @click="handle_delete" icon="el-icon-delete">删除</el-button> -->

    <el-table
      v-loading="loading"
      :data="tableData"
      class="tableTh28"
      style="width: 100%;margin-top: 20px"
      :header-cell-style="{'background-color': 'rgb(211,229,251)', color: '#000', padding: '0', 'font-size': '12px', 'font-weight': '500', height: '40px'}"
    >
      <el-table-column label="文件名" prop="fileName" align="center" />
      <el-table-column label="导入时间" prop="uploadTime" align="center" />
      <el-table-column label="导入人" prop="userName" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <span class="del-btn" @click="handle_delete(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <UploadDialog ref="uploadDialog" @refresh="getData"></UploadDialog>

  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
export default {
  components: {
    UploadDialog: () => import("./components/uploadDialog.vue"),
  },
  data(){
    return {
      queryParams: {
        fileName: null,
        time: null,
      },
      tableData: [],
      loading: false,
      // multipleSelection: [],
    }
  },
  created(){
    this.getData();
  },
  methods: {
    getData(){
      this.loading = true;
      const [ startTime, endTime ] = this.queryParams.time || [null, null],
            fileName = this.queryParams.fileName;
      let form = { token: getCookie("token"), startTime, endTime, fileName };
      $budgetAPI.claimQueryLog(
        form,
        res => {
          console.log(res);
          this.alertError(res);
          if(res.code == 0){
            this.tableData = res.content;
          }
          this.loading = false;
        },
        err => {
          this.alertError(err);
          this.loading = false;
        }
      )
    },
    handle_search(){
      this.getData();
    },
    async handle_delete(row){
      await this.$confirm('是否删除该日志？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      $budgetAPI.claimDeleteLog(
        { token: getCookie("token"), fileId: row.fileId, year: row.year },
        res => {
          this.alertError(res);
          if(res.code == 0){
            this.$message.success("删除日志成功");
            this.getData();
          }
        },
        err => {
          this.alertError(err);
        }
      )
    },
    handle_showDialog(refName){
      this.$refs[refName].init();
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    }
  },
}
</script>
<style lang="scss" scoped>
  .del-btn {
    color: red;
    cursor: pointer;
    user-select: none;
    &:hover {
      color: rgb(255, 107, 107);
    }
    &:active {
      color: red;
    }
  }
  /deep/ .el-form {
    display: flex;
  }
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  /deep/ .el-table {
    .el-table__header-wrapper {
      .cell {
        padding-left: 13px !important;
      }
    }
    .el-table__row {
      td {
        height: 40px !important;
        padding: 0 !important;
      }
      .cell {
        font-size: 13px !important;
      }
    }
  }
</style>